import React, { Component } from 'react';
import { Form, Select, Input, Button, Modal } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

class PopForm1 extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  render() {
    const { visible, onCancel, onCreate } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        visible={visible}
        title="创建"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel}
        onOk={onCreate.bind(this, this)}
      >
        <Form>
          <FormItem
            label="姓名"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请输入姓名!', }],
            })(
              <Input placeholder="请输入姓名" />
            )}
          </FormItem>
          <FormItem
            label="账户"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('username', {
              rules: [{ required: true, message: '请输入账户!', }],
            })(
              <Input placeholder="请输入账户" />
            )}
          </FormItem>
          <FormItem
            label="密码"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码!', }],
            })(
              <Input placeholder="请输入密码" />
            )}
          </FormItem>
          <FormItem
            label="性别"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('sex', {
              rules: [{ required: false, message: '请选择性别!', }],
            })(
              <Select placeholder="请选择性别">
                <Option value="男">男</Option>
                <Option value="女">女</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            label="描述"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('description', {
              rules: [{ required: false, message: '请输入内容!', }],
            })(
              <TextArea rows={4} />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }

}
const AddForm = Form.create()(PopForm1);
export default AddForm;